<template>
    <div class="box">
        <!-- 头部长条 -->
        <div class="header">
            <div class="card-col">
                <div class="left">
                    <div class="line"></div>
                    <span>溯源列表</span>
                </div>
                <div class="right">
                    <span class="btn" @click="tagManageHandler">标签管理</span>
                </div>
            </div>
        </div>
        <!-- 主体内容 -->
        <div class="main">
            <div class="component">
                <!-- 添加项 -->
                <div class="card-row add">
                    <div class="add-inner">
                        <div class="img" @click="addHandler">
                            <img src="/icon/添加.png" alt="" />
                        </div>
                        <span>添加溯源</span>
                    </div>
                </div>

                <!-- 成员项 -->
                <div class="card-row item" v-for="(item, index) in store.tagsOriginList" :key="index">
                    <div class="backImg">
                        <div class="time">
                            <span>{{ item.time }} 创建</span>
                        </div>
                        <img :src="item.img" alt="">
                    </div>
                    <div class="info">
                        <div class="zuo">
                            <h4>{{ item.title }}</h4>
                            <span>标签数量:{{ item.tags }}个</span>
                        </div>
                        <div class="code">
                            <div class="codeBack">
                                <img src="/icon/二维码.png" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="fItem">
                            <img src="/icon/关联标签.png" alt="">
                            <span>关联标签</span>
                        </div>
                        <div class="fItem" @click="(e) => editHandler(e, index)">
                            <img src="/icon/编辑.png" alt="">
                            <span>编辑</span>
                        </div>
                        <div class="fItem" @click="(e) => deleteHandler(e, index)">
                            <img src="/icon/删除.png" alt="">
                            <span>删除</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- 标签查看信息的弹窗 -->
    <el-dialog v-model="dialogVisible" title='编辑' width="600" height="500">
        <el-form label-width="auto" :model="bindForm" style="max-width: 600px" :rules="rules" ref="editForm">

            <el-form-item label="产品名称" label-position="right" prop="title">
                <el-input type="text" v-model="bindForm.title" />
            </el-form-item>
            <el-form-item label="标签数量" label-position="right" prop="tags">
                <el-input type="text" v-model.number="bindForm.tags" />
            </el-form-item>
            <el-form-item label="生产农场" label-position="right" prop="from">
                <el-input type="text" v-model="bindForm.from" />
            </el-form-item>
            <el-form-item label="农场地址" label-position="right" prop="address">
                <el-input type="text" v-model="bindForm.address" />
            </el-form-item>
            <el-form-item label="农场主" label-position="right" prop="farmer">
                <el-input type="text" v-model="bindForm.farmer" />
            </el-form-item>
            <el-form-item label="产品电商链接" label-position="right" prop="link">
                <el-input type="text" v-model="bindForm.link" />
            </el-form-item>
            <el-form-item label="产品质检员" label-position="right" prop="testPerson">
                <el-input type="text" v-model="bindForm.testPerson" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirmHandler(editForm)">确认</el-button>
                <el-button @click="resetHandler">重置</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<!-- 脚本 -->
<script lang='ts' setup>
import { deleteById, getOriginList } from '@/api/OriginApi';
import type { IOriginItem } from '@/interface/IOrigin';
import { useOriginStore } from '@/stores/OriginStore';
import type { FormInstance, FormRules } from 'element-plus';
import { onBeforeMount, reactive, ref, type ModelRef, type Reactive, type Ref } from 'vue';
import editReg from '@/regExp/editReg'
const controller: ModelRef<number> = defineModel("controller", { required: true })
// const list: Ref<IOriginItem[]> = ref([])
const store = useOriginStore()
// 控制显示详细信息的弹窗显示的开关
const dialogVisible = ref(false)
// 引入编辑表单验证规则
const rules = reactive<FormRules<IOriginItem>>(editReg)
// 表单ref
const editForm = ref<FormInstance>()
const bindForm: Ref<IOriginItem> = ref({
    id: 0,
    time: '',
    title: '',
    img: '',
    tags: 0,
    from: '',
    address: '',
    farmer: '',
    link: '',
    testPerson: ''
})
onBeforeMount(async () => {
    const result = await getOriginList()
    store.tagsOriginList = result.data.data
})

// 进入添加页
const addHandler = () => {
    controller.value = 2
}

// 进入标签管理页
const tagManageHandler = () => {
    controller.value = 3
}
// 编辑按钮
const editHandler = (e: Event, id: number) => {
    // 用这个id去拿对应的数据显示到编辑框当中
    store.id = id
    bindForm.value = store.tagsOriginList[id]
    // 显示修改的弹窗
    dialogVisible.value = true
}
// 编辑重置表单按钮
const resetHandler = () => {
    // 用空表单去覆盖当前项
    bindForm.value = store.tagsOriginInfo
}
// 提交修改表单  要做验证
const confirmHandler = (editForm: FormInstance | undefined) => {
    if (!editForm) return;
    editForm.validate(async (valid, fields) => {
        if (valid) {
            // 先处理一下id和图片以及修改时间
            bindForm.value.id = store.id
            bindForm.value.img = "https://ts2.tc.mm.bing.net/th/id/OIP-C.8qI8Z9lUf_8GJ87HqDP_qwHaFS?rs=1&pid=ImgDetMain&o=7&rm=3"
            bindForm.value.time = new Date().toLocaleString()
            store.tagsOriginList[store.id] = bindForm.value
            dialogVisible.value = false
        } else {
            console.log('提交失败')
        }
    })
}


// 删除按钮
const deleteHandler = async (e: Event, id: number) => {
    const result = await deleteById(id)
    // const origin = await getOriginList()
    // list.value = origin.data.data
    // 根据id删除store中的列表中的元素   本来应该是调用调用接口让后端去操作数据库的  这里用前端去操作store了
    store.tagsOriginList.splice(id, 1)
    console.log(result.data)
}
</script>


<!-- 组件样式表 -->
<style lang='scss' scoped>
.box {
    height: 100%;
    width: 100%;

    .header {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;

        .line {
            height: 50px;
            width: 5px;
        }
    }

    .main {
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;

        .component {
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            overflow: auto;
        }
    }
}

.card-row {
    width: 260px;
    height: 350px;
    flex-shrink: 0;
    margin: 0 10px;
    background: #132E3F;
    border-radius: 5px;
    color: white;
    box-shadow: .2px .2px 10px .2px rgb(80, 79, 79);
}

.card-col {
    width: 99%;
    height: 80px;
    flex-shrink: 0;
    margin: 0 10px;
    background: #132E3F;
    border-radius: 5px;
    color: white;
    box-shadow: .2px .2px 10px .2px rgb(80, 79, 79);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        height: 50px;
        width: 100px;
        margin-left: 20px;
        display: flex;
        align-items: center;

        .line {
            height: 50%;
            width: 3px;
            background-color: #52E1DE;
            border-radius: 3px;
        }

        span {
            margin-left: 10px;
            height: 50%;
        }
    }

    .right {
        height: 50px;
        width: 100px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
            height: 60%;
            width: 80px;
            background-color: #368B91;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
            border-radius: 3px;
            cursor: pointer;
        }
    }
}

.add {
    display: flex;
    justify-content: center;
    align-items: center;

    .add-inner {
        height: 150px;
        width: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .img {
            width: 60px;
            height: 60px;
            background-color: #19404F;
            border-radius: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            img {
                display: block;
                width: 30px;
                height: 30px;
                cursor: pointer;
                pointer-events: none;
            }
        }

        span {
            margin-top: 10px;
            display: block;
            height: 30px;
            width: 100%;
            text-align: center;
            line-height: 30px;
        }
    }
}

.item {
    overflow: hidden;
    position: relative;

    .backImg {
        width: 100%;
        height: 200px;
        box-shadow: .4px .4px 6px .4px black;


        .time {
            height: 30px;
            width: 260px;
            position: absolute;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99;

            span {
                height: 100%;
                width: 90%;
                display: block;
                font-size: 12px;
                text-align: end;
                line-height: 30px;
            }
        }

        img {
            height: 200px;
            width: 260px;
            position: absolute;
        }
    }

    .info {
        width: 100%;
        height: 80px;
        display: flex;
        border-bottom: 1px solid gray;

        .zuo {
            width: 170px;
            height: 100%;

            h4 {
                margin-top: 10px;
                margin-left: 10px;
                margin-bottom: 10px;
                height: 20px;
            }

            span {
                display: block;
                margin-left: 10px;
                font-size: 13px;
                color: gray;
            }
        }

        .code {
            width: 80px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .codeBack {
                height: 60px;
                width: 60px;
                border-radius: 3px;
                background-color: #1A404D;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    height: 40px;
                    width: 40px;
                }
            }
        }
    }

    .footer {
        height: 60px;
        margin-top: 5px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .fItem {
            cursor: pointer;
            height: 100%;
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                margin-top: 10px;
                height: 15px;
                width: 15px;
                display: block;
            }

            span {
                display: block;
                height: 20px;
                width: 100%;
                font-size: 12px;
                color: lightgrey;
                text-align: center;
                line-height: 20px;
                margin-top: 10px;
            }
        }
    }
}
</style>